<template>
	<view class="packageSharing">
		<view class="relative" @touchmove="handletouchmove">
		<view class="container" >
			<view class="pos">
				<view class="searchBox marginTop10" @tap="getnav(router(`search`))">
					<image src="../../../static/img/each.png" mode=""></image>
					<input type="text" value="" placeholder="输入关键词搜索会展方案" />
				</view>
				<view class="type disFlex">
					<view class="ts" v-for="(val,index) in typeList" :key="index" @tap="showPop(val,index)">
						<view :class="index == activeIndex?'activeColor':''">{{val}}</view>
						<image class="xjt" :src="index == activeIndex?'../../../static/img/sjt.png':'../../../static/img/xjt.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="list" v-if="info.length>0">
				<view class="activeList" v-for="(v,i) in info" :key='i' @tap="toproject(v.id)">
					<view v-if="v.types!=null" class="iconstxt">{{v.types.name}}</view>
					<image :src="v.cover" mode=""></image>
					<view class="line2 describe">{{v.title}}</view>
					<view class="priceBox">
						<text class="price">{{v.cost}}</text>
						<text class="word" style="color: #ccc;">非会员价</text>
					</view>
					<view  class="priceBox" style="margin-top: -5rpx;">
						<text class="price">{{v.member_price==null?v.cost:v.member_price}}</text>
						<text class="word" style="color: red;">会员价</text>
					</view>
				</view>
			</view>
			<!-- 为空 -->
			<view class="listnull" v-else style="margin-top: 50%;">
				<image src="../../../static/img/fail.png" mode=""></image>
				<view class="text">
					筛选结果为空
				</view>
			</view>
		</view>
	</view>
	<!-- 区域 -->
	<view class="selectPop" v-show="selectcity">
		<view class="pop">
			<view class="selectList citys">
				<view :class="-1 == activecity?'active':''" @tap="selcity('',-1)">全部</view>
				<view :class="i == activecity?'active':''" @tap="selcity(v,i)" v-for="(v,i) in city" :key='i'>{{v.shortname}}</view>
			</view>
			<view class="disFlex clearBox">
				<view class="clear" @tap="close">清空</view>
				<view class="sure" @tap="closePop">确定</view>
			</view>
		</view>
	</view>
	<!-- 展台类型 -->
	<view class="selectPop" v-show="selecttype">
		<view class="pop">
			<view class="selectList ">
				<view :class="-1 == activetype?'active':''" @tap="seltype('',-1)">全部</view>
				<view :class="i == activetype?'active tpyestyle':'tpyestyle'" @tap="seltype(v,i)" v-for="(v,i) in type" :key='i'>{{v.name}}</view>
			</view>
			<view class="disFlex clearBox">
				<view class="clear" @tap="close">清空</view>
				<view class="sure" @tap="closePop">确定</view>
			</view>
		</view>
	</view>
	<!-- 开口方向 -->
	<view class="selectPop" v-show="selectopen">
		<view class="pop">
			<view class="selectList">
				<view :class="-1 == activeopen?'active':''" @tap="selopen('',-1)">全部</view>
				<view :class="i == activeopen?'active':''" @tap="selopen(v,i)" v-for="(v,i) in open" :key='i'>{{v.name}}</view>
			</view>
			<view class="disFlex clearBox">
				<view class="clear" @tap="close">清空</view>
				<view class="sure" @tap="closePop">确定</view>
			</view>
		</view>
	</view>
	<!-- 面积 -->
	<view class="selectPop" v-show="selectmj">
		<view class="pop">
			<view class="selectList">
				<view :class="i == activemj?'active':''" @tap="selmj(v,i)" v-for="(v,i) in mj" :key='i'>{{v}}m²</view>
			</view>
			<view class="getmeter disFlex">
				<input type="text" placeholder="输入长" v-model="mjw" @input="mjws">
				<view class="and">x</view>
				<input type="text" value="" placeholder="输入宽" v-model="mjh" @input="mjhs" />
			</view>
			<view class="disFlex clearBox">
				<view class="clear" @tap="close">清空</view>
				<view class="sure" @tap="closePop">确定</view>
			</view>
		</view>
	</view>
	<!--  行业-->
	<view class="selectPop" v-show="selecthy">
		<view class="pop">
			<view class="selectList">
				<view :class="-1 == activehy?'active':''" @tap="selhy('',-1)">全部</view>
				<view :class="i == activehy?'active':''" @tap="selhy(v,i)" v-for="(v,i) in hy" :key='i'>{{v.name}}</view>
			</view>
			<view class="disFlex clearBox">
				<view class="clear" @tap="close">清空</view>
				<view class="sure" @tap="closePop">确定</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: ['区域', '展台类型', '开口方向', '面积', '行业'],
				activeIndex: -1,
				activecity: -1,
				activetype: -1,
				activeopen: -1,
				activemj: -1,
				activehy: -1,
				selectcity: false,
				selecttype: false,
				selectopen: false,
				selectmj: false,
				selecthy: false,
				city: [],
				type: [],
				open: [{
					id: 1,
					name: '一面开口'
				}, {
					id: 2,
					name: '二面开口'
				}, {
					id: 3,
					name: '三面开口'
				}, {
					id: 4,
					name: '四面开口'
				}],
				mj: [],
				hy: [],
				mjw: '',
				mjh: '',
				updata: {
					city: '',
					type: '',
					open_type: '',
					acreage: '',
					industry: '',
				},
				info: [],
				page:1,
			}
		},
		onLoad() {
			this.getinfo()
			this.getcity()
			this.getindustry()
			this.getopen()
			this.getmj()
		},
		methods: {
			handletouchmove: function(event) {
				this.selectcity = false
				this.selecttype = false
				this.selectopen = false
				this.selectmj = false
				this.selecthy = false
				this.activeIndex = -1
				console.log(this)
			},
			
			closePop() {
				this.selectcity = false
				this.selecttype = false
				this.selectopen = false
				this.selectmj = false
				this.selecthy = false
				this.activeIndex = -1
				this.page=1
				this.getinfo()
			},
			close() {
				this.http('/api/project/lists', 'post', {}, )
					.then((res) => {
						this.info = res.data.data
						this.activecity = -1
						this.activetype = -1
						this.activeopen = -1
						this.activemj = 0
						this.activehy = -1
						this.selectcity = false
						this.selecttype = false
						this.selectopen = false
						this.selectmj = false
						this.selecthy = false
						this.activeIndex = -1
						this.mjw = ''
						this.mjh = ''
						this.page=1
						this.updata = {}
					})
			},
			showPop(val, index) {
				if (this.activeIndex == index) {
					return
				}
				this.activeIndex = index;
				// this.selectPop = true;
				switch (val) {
					case '区域':
						this.selectcity = true;
						this.selecttype = false
						this.selectopen = false
						this.selectmj = false
						this.selecthy = false
						break;
					case '展台类型':
						this.selecttype = true;
						this.selectcity = false
						this.selectopen = false
						this.selectmj = false
						this.selecthy = false
						break;
					case '开口方向':
						this.selectopen = true;
						this.selectcity = false
						this.selecttype = false
						this.selectmj = false
						this.selecthy = false
						break;
					case '面积':
						this.selectmj = true;
						this.selectcity = false
						this.selecttype = false
						this.selectopen = false
						this.selecthy = false
						break;
					case '行业':
						this.selecthy = true;
						this.selectcity = false
						this.selecttype = false
						this.selectopen = false
						this.selectmj = false
						break;
				}
			},
			getmj(){
				this.http('/api/acreage/index', 'post', {}, )
					.then((res) => {
						res.data.map((v)=>{
							let i=`${v.start}-${v.end}`
							this.mj.push(i)
						})
					})
			},
			getcity() {
				this.http('/api/project/city', 'post', {}, )
					.then((res) => {
						this.city = res.data
					})
			},
			getindustry() {
				this.http('/api/industry/index', 'post', {}, )
					.then((res) => {
						this.hy = res.data
					})
			},
			getopen() {
				this.http('/api/project/boothType', 'post', {}, )
					.then((res) => {
						this.type = res.data
					})
			},
			selcity(v, i) {
				if (this.activecity == i) {
					return
				}
				this.activecity = i;
				if (this.activecity > -1) {
					this.updata.city = v.id
				} else {
					this.updata.city = ''
				}
			},
			seltype(v, i) {
				if (this.activetype == i) {
					return
				}
				this.activetype = i;
				if (this.activetype > -1) {
					this.updata.type = v.id
				} else {
					this.updata.type = ''
				}
			},
			selopen(v, i) {
				if (this.activeopen == i) {
					return
				}
				this.activeopen = i;
				if (this.activeopen > -1) {
					this.updata.open_type = v.id
				} else {
					this.updata.open_type = ''
				}
			},
			selmj(v, i) {
				if (this.activemj == i) {
					return
				}
				this.activemj = i;
				this.updata.acreage = v

			},
			selhy(v, i) {
				if (this.activehy == i) {
					return
				}
				this.activehy = i;
				this.updata.industry = v.id
				if (this.activehy > -1) {
					this.updata.industry = v.id
				} else {
					this.updata.industry = ''
				}
			},
			mjws(e) {
				this.mjw = e.detail.value
				this.activemj = -1;
				this.updata.acreage = '0-' + this.mjw * this.mjh
			},
			mjhs(e) {
				this.mjh = e.detail.value
				this.activemj = -1;
				this.updata.acreage = '0-' + this.mjw * this.mjh
			},
			getinfo(page) {
				console.log(page)
				if(page>1){
					this.updata.page=page
				}else{
					delete this.updata.page
				}
				this.http('/api/project/lists', 'post', this.updata, )
					.then((res) => {
						if(page>1){
							if(res.data.data.length>0){
								res.data.data.map((v)=>{
									this.info.push( v)
								})
							}else{
								uni.showToast({ title: '已经没有数据了!', icon: 'none' })
							}
							
						}else{
							this.info = res.data.data
						}
					
					})
			},
			toproject(v) {
				uni.navigateTo({
					url: '/pages/index/programme/programmeDetail?id=' + v
				});
			},
		},
		onReachBottom(){
			uni.showLoading({
			    title: '加载中'
			});
			this.getinfo(++this.page)
			setTimeout(function () {
			    uni.hideLoading();
			}, 1000);
		},
		swipeup (){
			console.log(s)
		}
	}
</script>

<style lang="less">
	.listnull{
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			// margin: 0 auto;
		}
		.text{
			font-size: 30rpx;
			color: #ccc;
			
		}
	}
	.overHidden {
		overflow: hidden;
	}
	
	.packageSharing {
		padding: 0 40rpx;
		.container{
			overflow: hidden;
		}
		.pos{
			z-index: 9999;
			width: 90%;
			height: 240rpx;
			position: fixed;
			background-color: #FFF;
		}
		// overflow: hidden;
		.searchBox {
			height: 80rpx;
			background: rgba(245, 245, 249, 1);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 34rpx;
				height: 34rpx;
			}

			input {
				padding-left: 8rpx;
				width: 100%;
				max-width: 350rpx;
			}
		}

		.type {
			margin-top: 50rpx;
			.ts {
				display: flex;
				align-items: center;
				height: 40rpx;

				.xjt {
					width: 14px;
					height: 14px;
					margin-top: 5rpx;
				}

				.activeColor {
					color: #2291FF;
				}
			}
		}

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 210rpx;
			overflow: scroll;
			.activeList {
				width: 325rpx;
				margin-top: 32rpx;
				position: relative;
				image {
					width: 100%;
					height: 188rpx;
					border-radius: 20rpx;
				}
				.iconstxt {
					height: 36rpx !important;
					background-color: #FFCF59;
					border-radius: 16px 0px 16px 0pX;
					padding: 0 23rpx;
					position: absolute;
					top: -8rpx;
					left: -8rpx;
					color: #fff;
					font-size: 24rpx;
				}
				.describe {
					font-size: 24rpx;
					padding-top: 10rpx;
				}

				.priceBox {
					margin-top: 25rpx;
					display: flex;
					align-items: center;

					.price {
						color: #FE7203;

						&::before {
							padding-right: 10rpx;
						}
					}

					.word {
						font-size: 20rpx;
						color: #BEC9D7;
						padding-left: 10rpx;
					}
				}
			}
		}

		.selectPop {
			position: fixed;
			top: 190rpx;
			right: 0;
			width: 100%;
			height: calc(100vh - 190rpx);
			z-index: 999;
			background: rgba(0, 0, 0, .3);

			.pop {
				background-color: #fff;
				padding: 40rpx;

				.selectList {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					width: calc(100% + 20rpx);
					
					view {
						width: 150rpx;
						height: 70rpx;
						background: rgba(245, 245, 249, 1);
						border-radius: 10rpx;
						text-align: center;
						line-height: 70rpx;
						font-size: 26rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

					}
					.tpyestyle{
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;			
					}
					.active {
						color: rgba(34, 145, 255, 1);
						background: rgba(238, 246, 255, 1);
					}
				}
				.citys{
					height: 350rpx;
					overflow: scroll;
				}
				.getmeter {
					margin-top: 20rpx;

					input {
						height: 72rpx;
						line-height: 70rpx;
						border: 1rpx solid rgba(229, 229, 229, 1);
						border-radius: 10rpx;
						padding: 0 27rpx;
					}

					.and {
						margin: 0 20rpx;
					}
				}

				.clearBox {
					margin-top: 50rpx;

					.clear {
						width: 154rpx;
						height: 90rpx;
						text-align: center;
						line-height: 90rpx;
						background: rgba(245, 245, 249, 1);
						border-radius: 10rpx;
						font-size: 32rpx;
						color: #BEC9D7;
					}

					.sure {
						flex: 1;
						margin-left: 20rpx;
						background: rgba(34, 145, 255, 1);
						border-radius: 10rpx;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 32rpx;
						color: #fff;
						text-align: center;
					}
				}
			}
		}


	}
</style>
